import React from 'react';
import Config from '../../common/config.js';
import Util from '../../common/util.js';
import Loader from '../../common/loader.js';
import $ from 'webpack-zepto';


var scope;
export default class SellerList extends React.Component {

    initState(){
        let data = this.queryData(1);
        return {
            data : data.list,
            sellerId : data.sellerId,
            page : 1,
            totalPage : data.totalPage,
            preview : null
        };
    };

    constructor(props){
        super(props);
        this.state = this.initState();
        scope = this;
    };

    componentWillMount(){
        Loader.start();
    };

    componentDidMount(){
        Loader.end();
    };

    next(){
        let page = scope.state.page , totalPage = scope.state.totalPage;
        page += 1;
        if(page > totalPage){
            return;
        }

        let data = scope.queryData(page);
        if(data.length > 0){
            scope.setState({
                page : page,
                data : scope.state.data.concat(data)
            });
        }
    };

    pageBtn(){
        if(scope.state.page >= scope.state.totalPage){
            return;
        }

        return (
            <div className="pageBtn" onClick={scope.next}>加载更多</div>
        );
    };

    queryData(page){
        let data = {
            list : [],
            totalPage : 1
        };

        if(!this.props.appId){
            return data;
        }

        $.ajax({
            url : Config.path('/terminal',['?appid=' + this.props.appId ,
                    '&uToken=' + Util.storage().get(this.props.appId),
                    '&p=' + page]),
            type : 'get',
            async : false,
            success : function(resp){
                if(resp.status == 200){
                    data.list = resp.data.list;
                    data.totalPage = resp.data.page.totalPage;
                }else if(resp.status == 401){
                    window.location.href = 'index.html?appid=' + scope.props.appId;
                }
            }
        });

        return data;
    };

    render(){
        return (
            <div className="seller-list">
                {this.pageHeader()}
                {this.renderList()}
                {this.pageBtn()}
                {this.preview()}
            </div>
        );
    };

    pageHeader(){
        return (
            <div className="weui_panel weui_panel_access">
                <div className="weui_panel_hd">我的销售凭证 <a href={window.location.href + '&type=add'} className="add-btn">添加销售凭证</a></div>
            </div>
        );
    };

    verifyResult(result,type,saleId){
        if(!result){
            return;
        }

        if(type == 'ACCEPT'){
            $.ajax({
                url : Config.path('terminal/index',['?uToken=',Util.storage().get(scope.props.appId)]),
                data : {sale_id : saleId},
                type :'put',
                success : function(resp){
                    if(resp.status == 200){
                        window.location.reload();
                    }
                }
            });
        }else if('REJECT' == type){
            scope.openPreview(result);
        }
    };

    renderList(){
        var items = this.state.data.map(function(obj,i){
            console.log(obj);
            return (
                <li key={i} className="weui_media_box weui_media_appmsg">
                    <div className="weui_media_hd" onClick={scope.openPreview.bind(this,obj.image,'img')}>
                        <img className="weui_media_appmsg_thumb" src={obj.image}></img>
                    </div>
                    <div className="weui_media_bd">
                        <div className="cell_info">
                            <p className="info_text">日期：{obj.submit_time}</p>
                            <p className="info_text">商品：{Util.shortStr(obj.goods.goods_name,10,'...')}</p>
                            <p className="info_text">数量：{obj.goods.goods_num}</p>
                        </div>
                    </div>
                    <div className="cell_info">
                        <p className="info_text" onClick={scope.verifyResult.bind(this,obj.verify_result , obj.is_verify,obj.id)}>{scope.operation(obj.is_verify)}</p>
                    </div>
                </li>
            );
        });

        if(null == items || items.length == 0){
            return scope.renderEmpty();
        }

        return (
            <ul className="weui_panel_bd data-list">
                {items}
            </ul>
        );
    };

    renderEmpty() {
        return (
            <div className="data-empty">暂无数据</div>
        );
    };

    openPreview(preview,type){
        if('img' === type){
            scope.setState({
                preview : preview
            });
        }else{
            scope.setState({
                verifyResult : preview
            });
        }
    };

    operation(status){
        if('PENDING' === status){
            return '待处理';
        }else if('DONE' === status){
            return '已收佣';
        }else if('REJECT' === status){
            return '未通过';
        }else if('ACCEPT'=== status){
            return <a className="weui_btn weui_btn_mini weui_btn_default">收佣</a>;
        }

        return status;
    };

    preview(){
        let isShow = false , preview = '' , title = '凭证预览';
        if(this.state.preview){
            isShow = true;
            preview = <img src={scope.state.preview}></img>;
        }

        if(this.state.verifyResult){
            isShow = true;
            preview = <p>{this.state.verifyResult}</p>
            title = '审核信息';
        }
        return (
            <div className={isShow ? '' : 'hide' + ' weui_dialog_alert'}>
                <div className="weui_mask"></div>
                <div className="weui_dialog">
                    <div className="weui_dialog_hd">
                        <strong className="weui_dialog_title">{title}</strong>
                    </div>
                    <div className="weui_dialog_bd pre-img">
                        {preview}
                    </div>
                    <div className="weui_dialog_ft">
                        <a href="#" className="weui_btn_dialog primary" onClick={this.closePreview}>确定</a>
                    </div>
                </div>
            </div>
        );
    };

    closePreview(){
        scope.setState({
            preview : null,
            verifyResult: null
        });
    };
}
